<template>
<div style="height: 100%">
  <mt-header title="HELLO" class="title" style="height:6%">
    <span slot="right"><img src="../../../assets/image/add.svg" class="add_img" ></span>
  </mt-header>
  <div class="littleInterval"></div>
  <mt-navbar v-model="selected">
    <mt-tab-item id="1">消息</mt-tab-item>
    <mt-tab-item id="2">通讯录</mt-tab-item>
  </mt-navbar>
  <div id="search_div" style="margin-top: 0.3rem">
    <mt-search v-model="name" cancel-text="取消" placeholder="搜索"></mt-search>
  </div>
  <!-- tab-container -->
  <div id="container" style="height: 69%;overflow: scroll">
    <mt-tab-container v-model="selected" swipeable=swipeable>
      <mt-tab-container-item id="1">
        <div>
          <div class="img_div">
            <img src="../../../assets/image/image1.png" class="circle"/>
          </div>
          <div class="right_div">
            <div class="list_2_div"><span class="nickName_span">客服小姐姐</span><span class="time_span">11:20</span><span class="month_span">3月7日</span></div>
            <div class="list_3_div"><span class="message">你好！我是客服姐姐，你可以...</span></div>
          </div>
          <div class="littleInterval"></div>
        </div>
        <div>
          <div class="img_div">
            <img src="../../../assets/image/image2.jpg" class="circle"/>
          </div>
          <div class="right_div">
            <div class="list_2_div"><span class="nickName_span">老黄</span><span class="time_span">12:17</span><span class="month_span">3月7日</span></div>
            <div class="list_3_div"><span class="message">最近在干什么？很忙吗？</span></div>
          </div>
          <div class="littleInterval"></div>
        </div>
        <div class="list_1_div">
          <div class="img_div">
            <img src="../../../assets/image/image3.jpg" class="circle"/>
          </div>
          <div class="right_div">
            <div class="list_2_div"><span class="nickName_span">霸气嫲</span><span class="time_span">14:23</span><span class="month_span">3月7日</span></div>
            <div class="list_3_div"><span class="message">我这里有几个兼职工作你...</span></div>
          </div>
          <div class="littleInterval"></div>
        </div>
       <!-- <mt-cell v-for="n in 20" :title="'内容 ' + n" />-->
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div>
          <div style="display: inline-block;line-height: 6rem">
            <img src="../../../assets/image/image1.png" class="circle"/>
          </div>
          <div class="right_div">
            <div class="list_2_div"><span class="nickName_span">客服小姐姐</span></div>
          </div>
          <div class="littleInterval"></div>
        </div>
        <div>
          <div style="display: inline-block;line-height: 6rem">
            <img src="../../../assets/image/image5.jpg" class="circle"/>
          </div>
          <div class="right_div">
            <div class="list_2_div"><span class="nickName_span">邹伯</span></div>
          </div>
          <div class="littleInterval"></div>
        </div>
        <div>
          <div style="display: inline-block;line-height: 6rem">
            <img src="../../../assets/image/image4.jpg" class="circle"/>
          </div>
          <div class="right_div">
            <div class="list_2_div"><span class="nickName_span">炜哥</span></div>
          </div>
          <div class="littleInterval"></div>
        </div>
        <div>
          <div style="display: inline-block;line-height: 6rem">
            <img src="../../../assets/image/image3.jpg" class="circle"/>
          </div>
          <div class="right_div">
            <div class="list_2_div"><span class="nickName_span">书友</span></div>
          </div>
          <div class="littleInterval"></div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>

</div>
</template>

<script>
    export default {
        name: "Message",
      data(){
          return{
            name:'',
            selected:'1',
            swipeable:true
          }
      }
    }
</script>

<style>
  #search_div .mint-search .mint-searchbar {
    width: 100%;
    position: relative;
  }
</style>

<style scoped>
.screen .mint-search{
  height: 0%;
}
#container{
  height: 69%;
  overflow: scroll;
}

.list_2_div{
  text-align: left;
  line-height: 3rem;
}
.nickName_span{
  font-weight: bold;
  font-size: large;
  margin-left: 1rem;
}
.month_span{
  float: right;
  margin-right: 0.5rem;
  color: gray;
}
.time_span{
  float: right;
  margin-right: 1rem;
  color: gray;
}
  .list_3_div{
    text-align: left;
    line-height: 2rem;
  }
.message{
  color: gray;
  margin-left: 1rem;
}
  .circle{
    width:4rem;
    height:4rem;
    border-radius:100px
  }
  .img_div{
    position: relative;
    bottom: 1rem;
    display: inline-block;
  }
  .right_div{
    display: inline-block;
    width: 80%;
  }
  .add_img{
    height: 30%;
    width: 30%;
  }
</style>
